<template>
  <div class="app-container">
    <div class="qrCodeContainer" style="width: 450px; height: 50px; display: none">
      <div v-for="(item, index) in imageList" :key="index" style="width: 100%" class="main qrCode content">
        <div class="left">
          <span style="font-size: 11px;">{{ formattedDate }}</span>
          <span>{{ $t(`Print.SerialNumber`) }}{{ item.seqNo }}</span>
          <img style="width: 70px; height: 70px" :src="item.barcode" alt="" />
          <span class="size-12">{{ $t(`Print.RongyangUpper`) }}</span>
        </div>
        <div>
          <table>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Department`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ demptName }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Directives`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.lotNo }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Body`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.style }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.MatchColors`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.color }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Number`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.sizeNo + '#' }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Even`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.lsNo === "1" ? item.caseQty : item.caseQty +'(预补)' }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <!-- 批量打印 -->
    <div class="qrCodeContainer1" style="width: 450px; height: 50px; display: none">
      <div v-for="(item, index) in imageList1" :key="index" style="width: 100%" class="main qrCode content">
        <div class="left">
          <span style="font-size: 11px;">{{ formattedDate }}</span>
          <span>{{ $t(`Print.SerialNumber`) }}{{ item.seqNo }}</span>
          <img style="width: 70px; height: 70px" :src="item.barcode" alt="" />
          <span class="size-12">{{ $t(`Print.RongyangUpper`) }}</span>
        </div>
        <div>
          <table>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Department`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ demptName1 }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Directives`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.lotNo }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Body`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.style }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.MatchColors`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.color }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Number`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.sizeNo + '#' }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Even`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.lsNo === "1" ? item.caseQty : item.caseQty +'(预补)' }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <Find @Launchform="Launchform5" :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" />

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '15px' }">
      <div style="display: flex">
        <div style="width: 90%">
          <h1>{{ $t(`Print.UpperLabelDetails`) }}</h1>
          <Table
            @download="download"
            @selectList="selectList"
            :summaryData="summaryData1"
            summary
            :isLoading="isLoading1"
            :tableHeader="tableHeader"
            :tableData="BarcodeQueryTableDate"
            :selection="true"
            :TableHeight="98"
          />
          <PageModule
            :PageData="{ buttonS: true, total: totalL }"
            :layout="'prev, pager'"
            @pageChange="pageChangeL"
            @pageSizeChange="pageSizeChangeL"
          />
        </div>
        <div style="width: 9%; margin-left: 10px">
          <h1>{{ $t(`Print.PrintLabels`) }}</h1>
          <Table @selectList="selectListq" :tableHeader="tableHeader1" :tableData="SizeNoQueryTableDate" :selection="true" :TableHeight="98" />
        </div>
      </div>
    </el-card>

    <el-dialog v-model="dialogVisible1" width="20%" class="dialog pb0">
      <el-input-number v-model="numList" :min="1" /><el-button style="margin-left: 10px" type="primary" size="default" @click="settins">{{
        $t(`Print.BatchSettings`)
      }}</el-button>

      <Table
        style="margin-top: 17px"
        @selectList="selectListq1"
        :tableHeader="tableHeader7"
        :tableData="RegeneratesThePrintLabelQueryMethodsTableDate"
        :selection="true"
        :TableHeight="98"
      />
      <el-button type="primary" size="default" @click="RegenerateTheUpper('1')">{{ $t(`Print.RegenerateTheUpperLabel`) }}</el-button>
      <el-button type="primary" size="default" @click="RegenerateTheUpper('0')">{{ $t(`Print.RegeneratePrerepairedUpperLabels`) }}</el-button>

    </el-dialog>

    <el-dialog v-model="dialogVisible2" width="20%" class="dialog pb0">
      <el-button style="margin-left: 10px" type="primary" size="default" @click="add">{{ $t(`Print.AddedSubtags`) }}</el-button>

      <Table
        @download="download1"
        @inputChange="inputChange"
        style="margin-top: 17px"
        :tableHeader="tableHeader8"
        :tableData="queryMMethodsTableDate"
        :TableHeight="98"
      />
      <el-button type="primary" size="default" @click="SplitTheUpperLabelMethods">{{ $t(`Print.SplitTheUpperTab`) }}</el-button>
      
    </el-dialog>


    <el-dialog v-model="dialogVisible" title="" width="550px" append-to-body>
      <el-button type="primary" size="default" @click="GenerateUpper">{{ $t(`Print.GenerateshoeUpperLabels`) }}</el-button>
      <el-button type="primary" size="default" @click="GenerateUpper1">{{ $t(`Print.GeneratePrerepairedUpperLabels`) }}</el-button>
      
    </el-dialog>

    <!-- <el-dialog v-model="dialogVisible3" title="" width="550px" append-to-body>
      <el-button type="primary" size="default" @click="GenerateUpper">重新生成打印标签</el-button>
      <el-button type="primary" size="default" @click="GenerateUpper1">重新生成预补鞋面打印标签</el-button>
      
    </el-dialog> -->
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { TreasurySinglePosition,TreasurySinglePosition1 } from '@/api/WarehouseDepartment/FactoryStorage/DeliveryNeedleCarReplenishmentDocuments'
import { ElMessage, ElMessageBox } from 'element-plus'
import fileRequest from '@/utils/fileRequest'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'UpperBarCodeLabel'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted, watch } from 'vue'
import {
  SplitTheUpperLabel,
  query,
  RegenerateTag,
  RegeneratesThePrintLabelQuery,
  BatchPrinting,
  BarcodeQuery,
  GenerateUpperLabel,
  displaySizeNumber,
  SizeNoQuery,
  RedrawTheLabel
} from '@/api/AccountingDepartment/FactoryProductionOperation/UpperBarCodeLabel'
import QRCode from 'qrcode'
const date = new Date();
const formattedDate = date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0');
const RedrawTheLabelMethodsParms = ref('')
// 




// 重打标签
const RedrawTheLabelMethods = async () => {
  try {
    const result = await RedrawTheLabel(RedrawTheLabelMethodsParms.value)
    if (result.code === 200) {
      BarcodeQueryMethods()
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.warning('重打标签失败')
  }
}

const handleCloseMateriaLKlc = (_done?: () => void) => {
  ElMessageBox.confirm('旧标签将会被废弃掉,请确认是否重打标签?')
    .then(async () => {
      RedrawTheLabelMethods()
    })
    .catch(() => {})
}

// 拆分标签
const barcode = ref('')

const SplitTheUpperLabelMethods = async () => {
  // Create a new array with caseQty values converted to numbers
  const caseQtyArray = queryMMethodsTableDate.value.map((item: any) => {
    return { caseQty: Number(item.caseQty) }
  })

  console.log(caseQtyArray) // This will log the new array

  // Check if the new array length is 1 or 0
  if (caseQtyArray.length <= 1) {
    JMessage.warning('还未拆分不可提交')
    return
  }

  // Check if all caseQty values are integers
  else if (!caseQtyArray.every((item: any) => Number.isInteger(item.caseQty))) {
    JMessage.warning('每袋双数必须是整数')
    return
  } else {
    // Map to extract caseQty values for the API call
    const caseQtyValues = caseQtyArray.map((item: any) => item.caseQty)

    try {
      // Call the function with the caseQtyValues array
      const result = await SplitTheUpperLabel(queryParms.value, caseQtyValues)
      if (result.code === 200) {
        dialogVisible2.value = false
        BarcodeQueryMethods()
        JMessage.success(result.message)
      } else {
        JMessage.error(result.message)
      }
    } catch (error) {
      JMessage.warning('拆分失败')
    }
  }
}

// 拆分标签查询
const inputChange = (row: any) => {}

const download1 = (row: any, list: any) => {
  const caseQtyToDelete = row.caseQty

  // 删除在 caseQty 中的项
  queryMMethodsTableDate.value = queryMMethodsTableDate.value.filter((item: any) => item.caseQty !== caseQtyToDelete)
}

const queryParms = ref('')

const add = () => {
  queryMMethodsTableDate.value.push({
    prop: 'caseQty',
    disableConfirm: true,
    change: 'Y',
    functionRow: [
      {
        label: '删除',
        bgColor: 'red'
      }
    ]
  })
}

const queryMMethodsTableDate = ref<any>([])

const queryMMethods = async () => {
  try {
    const result = await query(queryParms.value)
    queryMMethodsTableDate.value = [result].map((item: any) => {
      item.functionRow = [
        {
          label: '删除',
          bgColor: 'red'
        }
      ]
      item.change = 'Y'
      item.disableConfirm = true
      return item
    })
  } catch (error) {
    JMessage.error('拆分标签查询出错')
  }
}

const dialogVisible2 = ref(false)

const download = (row: any, item: any) => {
  if (item.label === '重打标签') {
    handleCloseMateriaLKlc()
    RedrawTheLabelMethodsParms.value = row.barcode
  } else {
    dialogVisible2.value = true
    queryParms.value = row.barcode
    queryMMethods()
  }
}

const RegenerateTagMethods = async (row:string) => {
  if(row  === '1'){
    RegeneratesThePrintData.value.map((item:any) => {
      item.lsNo = '1'
      return item
    })
  }else{
    RegeneratesThePrintData.value.map((item:any) => {
      item.lsNo = '0'
      return item
    })

  }
  try {
    const result = await RegenerateTag(RegeneratesThePrintLabelQueryLotNo.value, RegeneratesThePrintData.value)
    if (result.code === 200) {
      BarcodeQueryMethods()
      JMessage.success(result.message)
      dialogVisible1.value = false
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.error('重置失败')
  }
}

const RegenerateTheUpper = (row:any) => {
  if (RegeneratesThePrintData.value.length === 0) {
    JMessage.warning('请勾选数据')
  } else {
    RegenerateTagMethods(row)
  }
}

// 鞋面条码标签打印
const dialogVisible1 = ref(false)

// 重新生成打印数据
const RegeneratesThePrintData = ref([])

const selectListq1 = (row: any) => {
  RegeneratesThePrintData.value = row.map((item: any) => {
    return item
  })
}

const RegeneratesThePrintLabelQueryLotNo = ref('')

const numList = ref(10)

const settins = () => {
  RegeneratesThePrintLabelQueryMethodsTableDate.value = RegeneratesThePrintLabelQueryMethodsTableDate.value.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    item.caseTty = numList.value
    return item
  })
}

const RegeneratesThePrintLabelQueryMethodsTableDate = ref<any>([])

const RegeneratesThePrintLabelQueryMethods = async () => {
  const result = await RegeneratesThePrintLabelQuery(RegeneratesThePrintLabelQueryLotNo.value)
  RegeneratesThePrintLabelQueryMethodsTableDate.value = result.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    item.caseTty = 10
    return item
  })
}

// 批量打印
const BatchPrintingParms = ref({
  barcodeList: [],
  deptName: '',
  lotNo: '',
  deptNo: ''
})

const imageList1 = ref<any[]>([])

const makeQRCode1 = async () => {
  try {
    // 确保 barcodeList 是有效的数组
    if (!Array.isArray(OrderedDetailsParms1.value.barcodeList)) {
      return []
    }

    const imagePromises = OrderedDetailsParms1.value.barcodeList.map(async (item: any) => {
      const {lsNo, barcode, lotNo, deptName, sizeNo, caseQty, style, color, seqNo } = item

      // 检查条形码是否有效
      if (!barcode) {
        return null // 或者这里可以返回默认值
      }

      // 生成二维码
      const qrCodeImage = await QRCode.toDataURL(barcode)
      return { barcode: qrCodeImage, lotNo, deptName, sizeNo, caseQty, style, color, seqNo,lsNo }
    })

    // 等待所有 Promise 完成
    const imageUrls = await Promise.all(imagePromises)

    // 过滤出有效的二维码
    imageList1.value = imageUrls.filter((url) => url !== null)

    return imageList1.value // 返回生成的二维码图像列表
  } catch (error) {
    return [] // 在发生错误时返回空数组
  }
}

const OrderedDetailsParms1 = ref<any>({
  barcodeList: [],
  deptName: '',
  lotNo: '',
  deptNo: ''
})

watch(
  () => OrderedDetailsParms1.value,
  (newValue, oldValue) => {
    makeQRCode1()
  },
  { deep: true }
)

const printQRCode1 = () => {
  const qrCodeContainer1 = document.querySelector('.qrCodeContainer1')

  if (qrCodeContainer1 && qrCodeContainer1.children.length > 0) {
    const printWindow = window.open('', '_blank')

    printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印所选标签页</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
         <style>
          body, html {
            margin: 0;
            padding: 0;
          }
         @media print {  
              @page {  
                  margin-top: 6mm;  
                  margin-left: 0mm;  
                  margin-right: 0mm;  
                  margin-bottom: 0mm;  
              }
                  body {  
                      margin: 0;  
                      padding: 0;
                      transform-origin: top; /* 设置缩放原点 */  
                     
                  } 
                       .qrCode {  
                            page-break-after: always; /* 每个二维码后分页 */  
                        }  
                         
                            .qrCode:last-child {  
      page-break-after: avoid !important;  
  }  
          } 
                

            } 
          h2 {
                  margin-left: initial; /* 或者设置适合打印的左边距 */
                  page-break-inside: avoid; /* 避免在h2元素内部分页 */
          }
          .pad3 {
              padding: 3px;
          }

          .main {
              display: flex;
              justify-content: center;
          }

          .left {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-right: 5px;
          }


          .title {
              display: flex;
              justify-content: center;
              margin-bottom: 10px;
          }

          .center {
              text-align: center;
          }

          .right {
              text-align: right;
          }

          .left {
              text-align: left;
          }

          .no-padding {
              padding: 0;
          }

          .no-margin {
              margin: 0;
          }

          .margin-5 {
              margin: 5px;
          }

          .margin-top-5 {
              margin-top: 5px;
          }

          .margin-top-15 {
              margin-top: 15px;
          }

          .size-8 {
              font-size: 8px !important;
          }

          .size-10 {
              font-size: 10px;
          }

          .size-12 {
              font-size: 12px;
          }

          .size-14 {
              font-size: 14px;
          }

          .size-16 {
              font-size: 17px;
          }

          .size-18 {
              font-size: 18px;
          }

          .size-24 {
              font-size: 24px;
          }

          #date-tip {
              position: relative;
          }

          span.tip {
              display: inline-block;
              height: 14px;
              line-height: 14px;
              margin-right: 30px;
          }

          table {
              font-size: 10px;
              border-collapse: collapse;
              border-spacing: 0;
              border-collapse: collapse;
              border-spacing: 0;
              empty-cells: show;
              width: 100%;
          }

          table th,
          table td {
              border: 1px solid #000;
              font-size: 12px;
          }

          table.no-border,
          table.no-border th,
          table.no-border td {
              border: 0px;
          }

          table td.no-left-border {
              border-left: 0px;
          }

          table td.no-right-border {
              border-right: 0px;
          }

          .mainTable {
              margin: 0 20px;
          }

          /* 备料派工单汇总表 */
          .header {
              display: flex;
              justify-content: space-evenly;
          }

          .footer {
              margin-top: 20px;
              margin-right: 100px;
              display: flex;
              justify-content: right;
          }



          /* 可以在这里添加更多自定义的打印样式 */
        </style>
        </head>
        <body>
      `)

    const qrCodeImages = qrCodeContainer1.querySelectorAll('.qrCode')
    qrCodeImages.forEach((img) => {
      const cloneImg = img.cloneNode(true)
      printWindow!.document.body.appendChild(cloneImg)
    })

    printWindow!.document.write(`
        </body>
      </html>
    `)
    printWindow!.document.close()

    printWindow!.print()
  } else {
  }
}

const BatchPrintingMethods = async () => {
  if (BatchPrintingParms.value.barcodeList.length === 0) {
    JMessage.warning('请选择正确的号码')
  } else {
    const result = await BatchPrinting(BatchPrintingParms.value)

    if (result.code === 200) {
      OrderedDetailsParms1.value.barcodeList = result.data
      // 生成二维码
      await makeQRCode1() // 等待二维码生成完成`

      // 现在你可以打印二维码
      BarcodeQueryMethods()
      printQRCode1()
    } else {
    }
  }
}

const selectListq = (item: any) => {
  BatchPrintingParms.value.barcodeList = item.map((item: any) => {
    return item.sizeNo
  })
}

// 打印参数
const demptName = ref('')
const demptName1 = ref('')

// 号码查询
const SizeNoQueryTableDate = ref([])

const SizeNoQueryMethods = async () => {
  const result = await SizeNoQuery(styleList.value)
  if (result.code === 200) {
    SizeNoQueryTableDate.value = result.data.codeDetails
    JMessage.success(result.message)
  } else {
    JMessage.warning('请输入正确的指令')
  }
}

// 号码查询
const displaySizeNumberMethodsParms = ref({
  lotNo: ''
})

const styleList = ref({
  baseSize: '',
  flag: '',
  lotNo: '',
  style: ''
})

const displaySizeNumberMethods = async () => {
  const result = await displaySizeNumber(displaySizeNumberMethodsParms.value)
  if (result.code === 200 && result.data !== null) {
    styleList.value.lotNo = result.data.lotNo
  }
}

// 生成鞋面标签
const GenerateUpperLabelParms = ref({
  caseTty: '',
  lotNo: '',
  lsNo:'',
  sizeNo:''

})

  const dialogVisible = ref(false)

  const GenerateUpper = () => {
  GenerateUpperLabelParms.value.lsNo = '1'
  GenerateUpperLabelMethods()
  }

  const GenerateUpper1 = () => {
  GenerateUpperLabelParms.value.lsNo = '0'
  GenerateUpperLabelMethods()
  }

const GenerateUpperLabelMethods = async () => {
  const result = await GenerateUpperLabel(GenerateUpperLabelParms.value)
  if (result.code === 200) {
    dialogVisible.value = false

    BarcodeQueryMethods()
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

const TreasurySinglePositionMethods = async () => {
  let NewArray = []
  const result = await TreasurySinglePosition1()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.deptName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.deptNo + ' ' + item.deptName)
    }
    return arr
  }, [])

  formList1.value[9].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

const TreasurySinglePositionMethods1 = async () => {
  let NewArray = []
  const result = await TreasurySinglePosition1()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.deptName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.deptNo + ' ' + item.deptName)
    }
    return arr
  }, [])
  formList1.value[16].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const Launchform5 = (row: any) => {
  BarcodeQueryParms.value.lotNo = row[0].inputValue
  RegeneratesThePrintLabelQueryLotNo.value = row[0].inputValue
  BarcodeQueryParms.value.sizeNo = row[1].inputValue
  BarcodeQueryParms.value.checkBox1 = row[2].checked === true ? 1 : null
  BarcodeQueryParms.value.checkBox2 = row[3].checked === true ? (row[4].checked === true ? null : 1) : row[4].checked === true ? 2 : null
  BarcodeQueryParms.value.checkBox3 = row[5].checked === true ? (row[6].checked === true ? null : 1) : row[6].checked === true ? 2 : null
  BarcodeQueryParms.value.checkBox4 = row[7].checked === true ? 1 : null
  BarcodeQueryParms.value.checkBox5 = row[8].checked === true ? 1 : null
  demptName.value = row[9].selectValue.split('_')[1]
  batchNumber.value = row[15].inputValue
  demptName1.value = row[16].selectValue.split('_')[1]

  GenerateUpperLabelParms.value.caseTty = row[12].inputValue
  GenerateUpperLabelParms.value.lotNo = row[11].inputValue

  OrderedDetailsParms.value.deptName = row[9].selectValue.split(' ')[1]
  OrderedDetailsParms.value.deptNo = row[9].selectValue.split(' ')[0]

  BatchPrintingParms.value.deptName = row[16].selectValue.split(' ')[1]
  BatchPrintingParms.value.deptNo = row[16].selectValue.split(' ')[0]
  BatchPrintingParms.value.lotNo = row[14].inputValue

  displaySizeNumberMethodsParms.value.lotNo = row[14].inputValue
  if (row[14].inputValue !== '') {
    displaySizeNumberMethods()
  }
}

const summaryData1 = ref<any[]>([
  {
    index: 5,
    num: 0
  },
  {
    index: 11,
    num: 0
  },
  {
    index: 12,
    num: 0
  },
  {
    index: 15,
    num: 0
  },
  {
    index: 16,
    num: 0
  }
])

// 表格数据查询
const BarcodeQueryParms = ref<any>({
  checkBox1: '',
  checkBox2: '',
  checkBox3: '',
  checkBox4: '',
  checkBox5: '',
  lotNo: '',
  pageNum: 1,
  pageSize: 40,
  sizeNo: ''
})

const isLoading1 = ref(true)

const BarcodeQueryTableDate = ref([])

const BarcodeQueryMethods = async () => {
  isLoading1.value = true
  const result = await BarcodeQuery(BarcodeQueryParms.value)
  BarcodeQueryTableDate.value = result.list.map((item: any) => {
    item.functionRow = [
      {
        label: '拆分标签'
      },
      {
        label: '重打标签'
      }
    ]
    if (item.printFlag !== null) {
      item.printFlag = true
    }

    if (item.inFlag !== null) {
      item.inFlag = true
    }

    if (item.outFlag !== null) {
      item.outFlag = true
    }

    if (item.printFlag) {
      item.change = null
    }

    return item
  })
  summaryData1.value[0].num = result.caseQtyCount
  summaryData1.value[1].num = result.inQtyCount
  summaryData1.value[2].num = result.inSumCount
  summaryData1.value[3].num = result.OutQtyCount
  summaryData1.value[4].num = result.outSumCount
  totalL.value = result.total
  isLoading1.value = false
}

const totalL = ref(0)

const pageChangeL = (val: any) => {
  BarcodeQueryParms.value.pageNum = val
  BarcodeQueryMethods()
}

const pageSizeChangeL = (val: any) => {
  BarcodeQueryParms.value.pageSize = val
  BarcodeQueryMethods()
}

const batchNumber = ref('1')

onMounted(() => {
  TreasurySinglePositionMethods()

  TreasurySinglePositionMethods1()

  BarcodeQueryMethods()
})

const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入号码',
    inputValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '未打印条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '未缴库条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '已缴库条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '未出货条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '已出货条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '指令入库尾数',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '指令出库尾数',
    checked: false
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '缴库单位',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '打印所选标签'
  },
  {
    type: 'input',
    inputPlaceholder: '指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputLabel: '每袋双数',
    inputPlaceholder: '',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '生成鞋面标签'
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入批次',
    inputValue: '1'
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '缴库单位 ',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '显示号码'
  },
  {
    type: 'button',
    checkboxLabel: '打印鞋面标签'
  },
  {
    type: 'button',
    checkboxLabel: '搜索'
  },
  {
    type: 'button',
    checkboxLabel: '重新生成打印标签',
    bgColor: '#1890FF'
  }
])

const dialogVisible3 = ref(false)

const findData = async (count: any) => {
  if (count === '重新生成打印标签') {
    if (RegeneratesThePrintLabelQueryLotNo.value === '') {
      JMessage.warning('请输入正确的指令')
    } else {
      dialogVisible1.value = true
      RegeneratesThePrintLabelQueryMethods()
    }
  }
  if (count === '生成鞋面标签') {
    
    if (GenerateUpperLabelParms.value.caseTty === '' || GenerateUpperLabelParms.value.lotNo === '') {
      JMessage.warning('指令和每袋双数不可为空')
    } else {
      dialogVisible.value = true
      // 
    }
  }

  if (count === '打印所选标签') {
    if (OrderedDetailsParms.value.deptName === '') {
      JMessage.warning('缴库单位不可为空')
    } else if (OrderedDetailsParms.value.barcodeList.length === 0) {
      JMessage.warning('请勾选需要打印的数据')
    } else {
      OrderedDetailsParms.value.barcodeList = OrderedDetailsParms.value.barcodeList.map((item: any) => {
        return item.barcode
      })
      const res = await LoginWork.post<any, any>(`/produce/PrintSelectedLabels`, OrderedDetailsParms.value)
      if (res.code === 200) {
        BarcodeQueryMethods()
        printQRCode()
      }
    }
  }
  if (count === '显示号码') {
    if (styleList.value.lotNo === '') {
      JMessage.warning('请先输入指令在进行查询')
    } else {
      SizeNoQueryMethods()
    }
  }

  if (count === '打印鞋面标签') {
    if (BatchPrintingParms.value.lotNo === '') {
      JMessage.warning('请先输入指令')
    } else if (BatchPrintingParms.value.deptName === '' || BatchPrintingParms.value.deptName === undefined) {
      JMessage.warning('缴库单位不可为空')
    } else {
      BatchPrintingMethods()
    }
  }

  if (count === '搜索') {
    BarcodeQueryMethods()
  }
}

const printQRCode = () => {
  const qrCodeContainer = document.querySelector('.qrCodeContainer')

  if (qrCodeContainer && qrCodeContainer.children.length > 0) {
    const printWindow = window.open('', '_blank')

    printWindow!.document.write(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>打印所选标签页</title>
            <link rel="stylesheet" type="text/css" href="print.css" media="print">
           <style>
            body, html {
              margin: 0;
              padding: 0;
            }
           @media print {  
                @page {  
                    margin-top: 6mm;  
                    margin-left: 0mm;  
                    margin-right: 0mm;  
                    margin-bottom: 0mm;  
                }
                    body {  
                        margin: 0;  
                        padding: 0;
                        transform-origin: top; /* 设置缩放原点 */  
                       
                    } 
                         .qrCode {  
                              page-break-after: always; /* 每个二维码后分页 */  
                          }  
                           
                              .qrCode:last-child {  
        page-break-after: avoid !important;  
    }  
            } 
                  

              } 
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
            }
            .pad3 {
                padding: 3px;
            }

            .main {
                display: flex;
                justify-content: center;
            }

            .left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-right: 5px;
            }


            .title {
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
            }

            .center {
                text-align: center;
            }

            .right {
                text-align: right;
            }

            .left {
                text-align: left;
            }

            .no-padding {
                padding: 0;
            }

            .no-margin {
                margin: 0;
            }

            .margin-5 {
                margin: 5px;
            }

            .margin-top-5 {
                margin-top: 5px;
            }

            .margin-top-15 {
                margin-top: 15px;
            }

            .size-8 {
                font-size: 8px !important;
            }

            .size-10 {
                font-size: 10px;
            }

            .size-12 {
                font-size: 12px;
            }

            .size-14 {
                font-size: 14px;
            }

            .size-16 {
                font-size: 17px;
            }

            .size-18 {
                font-size: 18px;
            }

            .size-24 {
                font-size: 24px;
            }

            #date-tip {
                position: relative;
            }

            span.tip {
                display: inline-block;
                height: 14px;
                line-height: 14px;
                margin-right: 30px;
            }

            table {
                font-size: 10px;
                border-collapse: collapse;
                border-spacing: 0;
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
                width: 100%;
            }

            table th,
            table td {
                border: 1px solid #000;
                font-size: 12px;
            }

            table.no-border,
            table.no-border th,
            table.no-border td {
                border: 0px;
            }

            table td.no-left-border {
                border-left: 0px;
            }

            table td.no-right-border {
                border-right: 0px;
            }

            .mainTable {
                margin: 0 20px;
            }

            /* 备料派工单汇总表 */
            .header {
                display: flex;
                justify-content: space-evenly;
            }

            .footer {
                margin-top: 20px;
                margin-right: 100px;
                display: flex;
                justify-content: right;
            }



            /* 可以在这里添加更多自定义的打印样式 */
          </style>
          </head>
          <body>
        `)

    const qrCodeImages = qrCodeContainer.querySelectorAll('.qrCode')
    qrCodeImages.forEach((img) => {
      const cloneImg = img.cloneNode(true)
      printWindow!.document.body.appendChild(cloneImg)
    })

    printWindow!.document.write(`
          </body>
        </html>
      `)
    printWindow!.document.close()

    printWindow!.print()
  } else {
  }
}

const imageList = ref<any[]>([])

const makeQRCode = async () => {
  try {
    const imagePromises = OrderedDetailsParms.value.barcodeList.map(async (item: any) => {
      let { barcode, lotNo, deptName, sizeNo, caseQty, style, color, seqNo,lsNo } = item

      barcode = await QRCode.toDataURL(barcode)
      return { barcode, lotNo, deptName, sizeNo, caseQty, style, color, seqNo,lsNo }
    })

    const imageUrls = await Promise.all(imagePromises)
    imageList.value = imageUrls

  } catch (error) {
    return []
  }
}

const selectList = (selectedRows: any[]) => {
  OrderedDetailsParms.value.barcodeList = selectedRows.map((item: any) => {
    const { barcode, lotNo, deptName, sizeNo, caseQty, style, color, seqNo,lsNo } = item
    return {
      barcode,
      lotNo,
      deptName,
      sizeNo,
      caseQty,
      style,
      color,
      seqNo,
      lsNo

    }
  })
}

const OrderedDetailsParms = ref<any>({
  barcodeList: [],
  deptName: '',
  lotNo: '',
  deptNo: ''
})

watch(
  () => OrderedDetailsParms.value,
  (newValue, oldValue) => {
    makeQRCode()
  },
  { deep: true }
)

// 表格数据

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '号码',
    prop: 'sizeNo'
  },
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    label: '条码',
    prop: 'barcode'
  },
  {
    label: '条码双数',
    prop: 'caseQty'
  },
  {
    label: '已打印',
    type: 'checkbox',
    prop: 'printFlag'
  },
  {
    label: '打印时间',
    prop: 'printTime'
  },
  {
    label: '单位',
    prop: 'deptName'
  },
  {
    label: '已入库扫描',
    type: 'checkbox',
    prop: 'inFlag'
  },
  {
    label: '入库扫描时间',
    prop: 'inTime'
  },
  {
    label: '入库数量',
    prop: 'inQty'
  },
  {
    label: '入库尾数',
    prop: 'inSum'
  },
  {
    label: '已出库扫描',
    type: 'checkbox',
    prop: 'outFlag'
  },
  {
    label: '出库扫描日期',
    prop: 'outTime'
  },
  {
    label: '出库数量',
    prop: 'outQty'
  },
  {
    label: '出库尾数',
    prop: 'outSum'
  },
  {
    label: '操作',
    prop: 'outSum',
    type: 'functionRow',
    width: 200
  }
])

const tableHeader1 = ref([
  {
    label: '号码',
    prop: 'sizeNo'
  }
])

const tableHeader7 = ref([
  {
    label: '号码',
    prop: 'sizeNo',
    change: true
  },
  {
    label: '可重新生成订单数',
    prop: 'orderQty',
    change: true
  },
  {
    label: '操作',
    prop: 'outSum',
    type: 'functionRow'
  }
])

const tableHeader8 = ref([
  {
    label: '每袋双数',
    prop: 'caseQty'
  },
  {
    label: '操作',
    prop: 'orderQty',
    type: 'functionRow'
  }
])
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

.left {
  text-align: left;
}
</style>
